(function () {
    let shopid = 0,
        areaid = 0,
        prev;
    init()

    function init() { //入口
        getShopData()
        getAreaData()
        getGoodsData()
        $("#nav").on("click", ".click", clickNavList) //点击展开导航
        $("#info ul").on("click", "li", clickInfo) //点击创建商品
        $("footer>.nav li").eq(2).click(clickTop) //返回顶部
    }

    function getShopData() { //获取店铺数据
        $.ajax({
            url: "http://chst.vip:1234/api/getgsshop"
        }).then(res => {
            createShopList(res.result)
        })
    }

    function createShopList(data) { //创建店铺数据
        let html = data.reduce((value, item) => {
            return value += `
                <li class='shopid' shopid=${item.shopId}>${item.shopName}</li>
            `
        }, "")
        $("#nav .shop .txt").text(`${data[shopid].shopName}`) //动态生成Nav导航的首页默认文字
        $("#info .shop").html(html)
    }

    function getAreaData() { //获取区域数据
        $.ajax({
            url: "http://chst.vip:1234/api/getgsshoparea"
        }).then(res => {
            createAreaList(res.result)
        })
    }

    function createAreaList(data) { //创建区域数据
        let html = data.reduce((value, item) => {
            return value += `
                <li class='areaid' areaid=${item.areaId}>${item.areaName}</li>
            `
        }, "")
        let txt = `${data[areaid].areaName}`.split("（")[0]
        $("#nav .area .txt").text(txt) //动态生成Nav导航的首页默认文字
        $("#info .area").html(html)
    }

    function clickNavList() { //点击展开导航
        if ($(this).attr("class") === "shop click") {
            $("#info .shop").toggle().siblings().css({
                display: "none"
            });
        } else {
            $("#info .area").toggle().siblings().css({
                display: "none"
            });
        }
        changePrev()
    }

    function clickInfo() { //点击创建商品，判断点击的是哪个，来更改shopid,areaid;
        if ($(this).hasClass("shopid")) {
            shopid = $(this).attr("shopid");
            $("#info .shop").toggle()
            $("#nav .shop .txt").text($(this).text())
            getGoodsData()
        } else {
            areaid = $(this).attr("areaid");
            $("#info .area").toggle()
            $("#nav .area .txt").text($(this).text().split("（")[0])
            getGoodsData()
        }
        changePrev()
    }

    function getGoodsData() { //获取商品数据，
        $.ajax({
            url: "http://chst.vip:1234/api/getgsproduct?",
            data: {
                shopid: `${shopid}`,
                areaid: `${areaid}`
            }
        }).then(res => {
            createGoodsList(res.result);
        })
    }

    function createGoodsList(data) { //创建商品列表
        let html = data.reduce((value, item) => {
            return value += `
            <li>
                <img src=${item.productImg}>
                <p class='name'>${item.productName}</p>
                <p class='price'>${item.productPrice}</p>
            </li>
            `
        }, '')
        $("#main .goods").html(html)
    }

    function clickTop() {
        $("html").stop().animate({
            scrollTop: 0
        }, 200)
    }

    function changePrev() { //根据元素display的属性值判断是block or none 来确定箭头的方向
        if ($("#info .shop").css("display") == "block") $("#nav .shop .triangle").text("▲")
        else $("#nav .shop .triangle").text("▼")
        if ($("#info .area").css("display") == "block") $("#nav .area .triangle").text("▲")
        else $("#nav .area .triangle").text("▼")
    }
}())